v-for介紹

v-for 指令，可以透過陣列、物件、常數做迴圈遍歷資料，然後渲染出相應的內容。
針對不同資料屬性[陣列、物件、常數、Template]做v-for渲染示範

陣列

用v-for去遍歷陣列中的資料，並渲染頁面

<div id="app">
    <ul>
        <li v-for="(item, index) in nameArray">
            索引值: {{ index }}, 姓名: {{ item.name }}
        </li>
    </ul>
</div>

let app = new Vue({
  el: '#app',
  data: {
    nameArray: [
        { name: 'Terry'},
        { name: 'Ming'},
        { name: 'Eric'}
    ],
  },
});

● 索引值:0, 姓名:Terry
● 索引值:1, 姓名:Ming
● 索引值:2, 姓名:Eric

nameArray 是一個陣列，item 代表陣列中的元素，使用 item.name 可帶出屬性。
其中第二個參數 index 是索引值 (suggested required)

物件

nameObject是一個物件，item 代表陣列中的元素，key 是鍵值，index 是索引值。

<div id="app">
	<ul>
		<li v-for="(item, key, index) in nameObject">
			物件索引: {{ index }}, key: {{ key }}, 姓名: {{ item.name }}
		</li>
	</ul>
</div>

let app = new Vue({
  el: '#app',
  data: {
    nameObject: {
        '123': { name: 'Terry'},
        '456': { name: 'Ming'},
        '789': { name: 'Eric'}
    },
  },
});

● 物件索引:0, key:123, 姓名:Terry
● 物件索引:1, key:456, 姓名:Ming
● 物件索引:2, key:789, 姓名:Eric

常數

v-for常數迴圈，如同javascript for迴圈

<div id="app">
	<ul>
		<li v-for="(item, index) in count">
			常數: {{ item }}
		</li>
	</ul>
</div>

let app = new Vue({
  el: '#app',
  data: {
    count: 3
  },
});

● 常數:1
● 常數:2
● 常數:3

template

<div id="app">
	<ul>
    <template v-for="(item, index) in userData">
      <li>索引: {{ index }}, id: {{ item.id }}, name: {{ item.name }}</li>
    </template>
	</ul>
</div>

let app = new Vue({
  el: '#app',
  data: {
    userData: [
        {
            id: '1',
            name: 'Ming'
        },
        {
            id: '2',
            name: 'Eric'
        },
    ]
  },
});

● 索引: 0, id: 1, name: Ming
● 索引: 1, id: 2, name: Eric

v-if 與 v-for的秘密

v-for 的優先權高於 v-if，當兩者皆出現在同一個元素上時，v-if 會隨著 v-for 重覆執行數次
(無論v-if條件是什麼，都將遍歷數組的每個項目)

由此可知v-for是女士，因為女士優先!

// smell bad
<ul>
  <li v-for='product in products' 
    :key='product.id' 
    v-if='product.price > 60'>
    {{ product.name }}
  </li>
</ul>

為了避免上述情況，我們應該在進行v-for之前過濾數據(可以在computed/methods做數據過濾!)

// computed 示範
<ul>
  <li v-for='products in productsOverSixty' :key='product.id' >
    {{ product.name }}
  </li>
</ul>

<script>
  export default {
    data () {
      return {
        products: []
      }
    },
    computed: {
      productsOverSixty: function () {
        return this.products.filter(product => product.price > 60)
      }
    }
  }
</script>

下一篇要來介紹watch，監聽我要的資料囉~

Resource
better-vuejs-v-for
Vue.js: 列表渲染 v-for